
import { Table, Popconfirm, Space, Card, Breadcrumb, Input, Button } from 'antd';
import { useEffect } from 'react';
import { useHistory } from 'react-router';

import { useCommodity } from "../../hook/commodity"
const { Search } = Input;


export default () => {
    // 从hook中定义的组件中获取到暴露的数据和方法
    const [{rows, total, curPage, eachPage }, { getCommodity, delCommodity, findCommodity, addSeckills,setCurPage, setEachPage}] = useCommodity();

    // 获取跳转核心对象，通过 history.push 方法实现页面跳转
    const history = useHistory();

    // 表头设置
    const columns = [
        {
            title: '商品名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '存储条件',
            dataIndex: 'storeCondition',
            key: 'storeCondition',

        },

        {
            title: '产地',
            dataIndex: 'place',
            key: 'place'
        },
        {
            title: '规格',
            dataIndex: 'specs',
            key: 'specs'
        },

        {
            title: '操作',
            dataIndex: 'option',
            key: 'option',
            render: (_, record) =>
                <Space>
                    {/* <Popconfirm title="是否修改?" onConfirm={() => {sessionStorage.setItem('commodityData',JSON.stringify(record));history.push('/info/editCommodity') }}>
                        <a>修改</a>
                    </Popconfirm> */}
                    <Button danger style={{ marginLeft: "5px", backgroundColor: "#8B8989", border: 0, color: "white" }} onClick={() => addToSeckills(record._id, record.name)}>新增活动</Button>
                </Space>
        }
    ];

    // addToSeckills
    // 可以获取到输入框的内容
    const onSearch = value => { findCommodity(value); };

    // 调用获取商品信息数据方法
    useEffect(() => {
        getCommodity();
    }, [getCommodity]);

    // addSeckills
    function addToSeckills(id, name) {
        addSeckills({ data: { commodity_id: id, name: name } })
    }

    return (
        <Space direction="vertical" style={{ width: "100%" }}>
            <Card>
                <Search placeholder="请输入商品名称查找" onSearch={onSearch} style={{ width: 200, marginTop: "20px" }} />

                <Table  dataSource={rows}
                    columns={columns}
                    rowKey={(record) => record._id}
                    pagination={{
                        total,
                        position: ['bottomLeft'],
                        current: curPage,
                        pageSize: eachPage,
                        showQuickJumper: true,
                        showSizeChanger: true,
                        pageSizeOptions: ['2', '5', '10', '20'],
                        defaultPageSize: 5,
                        onChange: (curPage, eachPage) => {
                            setCurPage(curPage);
                            setEachPage(eachPage);
                        },
                    }} />
            </Card>
        </Space>

    )
}
